{% extends "finance/base.html" %}
{% load static %}

{% block content %}
<style>
    /* Full-screen wallpaper while respecting the sidebar */
    .wallpaper-container {
        position: fixed;
        top: 0;
        left: 250px; /* Matches sidebar width */
        width: calc(100vw - 250px);
        height: 100vh;
        overflow: hidden;
        z-index: -1; /* Keep it in the background */
        transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
    }

    .wallpaper-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures proper scaling without stretching */
    }

    /* Override padding/margins for a clean background */
    .main-content {
        padding: 0 !important;
        margin: 0 !important;
        position: relative; /* Ensures content stays above background */
        z-index: 1;
    }

    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Quote overlay styling */
    .quote-overlay {
        position: absolute;
        top: 30%;
        left: 5%;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0.3);
        padding: 2rem;
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }

    .quote-text {
        font-size: 1.8rem; /* Slightly smaller for better readability */
        font-weight: 300;
        font-style: italic;
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    .company-name {
        font-size: 1.4rem;
        font-style: italic;
        opacity: 0.9;
        margin-top: 1rem;
    }
</style>

<!-- Wallpaper -->
<div class="wallpaper-container" id="wallpaperContainer">
    <img src="{% static 'images/wallpaper.png' %}" alt="Wallpaper" class="wallpaper-image">
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sidebar = document.getElementById('sidebar');
        const wallpaperContainer = document.getElementById('wallpaperContainer');
        const sidebarToggle = document.getElementById('sidebarToggle');

        function adjustWallpaper() {
            if (sidebar.classList.contains('sidebar-collapsed')) {
                wallpaperContainer.style.width = "100vw"; 
                wallpaperContainer.style.left = "0";
            } else {
                wallpaperContainer.style.width = "calc(100vw - 250px)";
                wallpaperContainer.style.left = "250px";
            }
        }

        sidebarToggle.addEventListener('click', adjustWallpaper);
        adjustWallpaper(); // Run once on page load
    });
</script>

{% endblock %}